<template>
	<view class="e-flex e-flex-between spell-group-item" v-if="item">
		<view class="e-flex">
			<load-image mode="aspectFit" :size="['64rpx']"  :src="item.userPhoto" v-if="item.userPhoto">
			</load-image>
			<app-image mode="aspectFit" :size="['64rpx']" src="default-headerImg.png" v-else />
			<text class="c-333 e-font-28 e-p-l-20">{{item.userNickname | hiddenMiddleName}}</text>
		</view>
		<view class="e-flex">
			<view class="c-666 e-font-24 lh-34 e-m-r-20">
				<view class="">
					<text>{{item.groupNum}}</text>
					<text>{{$t('spellgroup.rp')}},</text>
					<text>{{$t('spellgroup.hc')}}</text>
					<text>{{item.groupNum - item.nowNum}}</text>
					<text>{{$t('spellgroup.rct')}}</text>
				</view>
				<view class="text-right">
					<text>{{$t('spellgroup.surplus')}}</text>
					<text>{{item.surplusTime}}</text>
				</view>
			</view>
			<view class="spell-join-btn bg-primary" @tap="handleToJoin(item.groupCode)">
				<text class="c-white e-font-28">{{$t('spellgroup.goJoin')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
		props:{
			item: Object
		},
		filters: {
			hiddenMiddleName(name) {
				const arr = [...name]
				if (arr.length === 1) {
					return name
				} else if (arr.length === 2) {
					return arr[0] + '*'
				} else {
					return arr[0] + '*' + arr[arr.length - 1]
				}
			}
		},
		methods: {
			handleToJoin(groupCode) {
				this.$emit('join',groupCode)
			}
		}
	}
</script>

<style lang="scss" scoped>
.spell-group-item {
	background: #FFFFFF;
	padding: 30rpx 20rpx;
}
.lh-34 {
	line-height: 34rpx;
}
.spell-join-btn {
	border-radius: 10px;
	padding: 10rpx 30rpx;
	line-height: 40rpx;
}
</style>